<template>
  <el-row :gutter="40">
    <el-col v-if="!form.id">
      <el-empty description="请选择左侧菜单后操作" :image-size="100"></el-empty>
    </el-col>
    <template v-else>
      <el-col :lg="12">
        <h2>{{ form.meta.title || "新增菜单" }}</h2>
        <el-form :model="form" :rules="rules" ref="dialogForm" label-width="80px" label-position="left">
          <el-form-item label="显示名称" prop="meta.name">
            <el-input v-model="form.name" clearable placeholder="菜单显示名字"></el-input>
          </el-form-item>
          <el-form-item label="菜单图标" prop="meta.icon">
            <sc-icon-select v-model="form.icon" clearable></sc-icon-select>
          </el-form-item>
          <el-form-item label="菜单图像" prop="meta.icon">
            <avatar v-model="form.icon" clearable></avatar>
          </el-form-item>
          <el-form-item label="路由地址" prop="path">
            <el-input v-model="form.router" clearable placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="排序号" prop="path">
            <el-input-number v-model="form.sortNum" clearable placeholder=""></el-input-number>
          </el-form-item>
          <el-form-item label="颜色" prop="color">
            <el-color-picker v-model="form.meta.color" :predefine="predefineColors"></el-color-picker>
          </el-form-item>
          <el-form-item label="是否隐藏" prop="meta.hidden">
            <el-checkbox v-model="form.meta.hidden">隐藏菜单</el-checkbox>
            <el-checkbox v-model="form.meta.hiddenBreadcrumb">隐藏面包屑</el-checkbox>
            <div class="el-form-item-msg">菜单不显示在导航中，但用户依然可以访问，例如详情页</div>
          </el-form-item>
          <el-form-item label="标签" prop="tag">
            <el-input v-model="form.meta.tag" clearable placeholder=""></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="save" :loading="loading">保 存</el-button>
          </el-form-item>
        </el-form>

      </el-col>
      <el-col :lg="12" class="apilist">
        <h2>接口权限</h2>
        <sc-form-table v-model="form.apiList" :addTemplate="apiListAddTemplate" placeholder="暂无匹配接口权限">
          <el-table-column prop="code" label="标识">
            <template #default="scope">
              <el-input v-model="scope.row.code" placeholder="请输入内容"></el-input>
            </template>
          </el-table-column>
        </sc-form-table>
      </el-col>
    </template>
  </el-row>

</template>

<script setup>
import scIconSelect from '@/components/scIconSelect/index.vue'
import scFormTable from '@/components/scFormTable/index.vue'
import avatar from "@/components/avatar.vue";
import {ref} from "vue";
import http from "@/utils/request";
import {ElMessage} from "element-plus";

const emit = defineEmits(['success', 'closed'])
const form = ref({
  id: "",
  parentId: "",
  name: "",
  path: "",
  component: "",
  redirect: "",
  meta: {
    title: "修改菜单",
    icon: "",
    active: "",
    color: "",
    type: "menu",
    fullpage: false,
    tag: "",
  },
  apiList: [],
  menuOptions: [],
  menuProps: {
    value: 'id',
    label: 'title',
    checkStrictly: true
  },
  predefineColors: [
    '#ff4500',
    '#ff8c00',
    '#ffd700',
    '#67C23A',
    '#00ced1',
    '#409EFF',
    '#c71585'
  ],
  rules: [],
})

const apiListAddTemplate=ref({
  code: "",
  url: ""
})

const loading = ref(false)

const save = async () => {
  console.info(form.value.apiList.map(item => item.code))
  loading.value = true
  form.value.permission = form.value.apiList.map(item => item.code).join(",");
  let res = await http.form("/applicationMenu/update", form.value);
  loading.value = false
  if (res.code === 200) {
    emit('success', {})

    ElMessage({
      message: '保存成功',
      type: 'success',
    })
  } else {
    ElMessage.error(res.msg)
  }
}

const setData = (data, pid) => {

  form.value.id = data.id;
  form.value.sortNum = data.sortNum;
  form.value.name = data.name;
  form.value.icon = data.icon;
  form.value.router = data.router;
  form.value.parent = data.title;
  form.value.permission = data.permission;

  form.value.parent = pid;
  form.value.apiList = [];
  if (form.value.permission) {
    form.value.apiList = form.value.permission.split(",").map(item => {
      let result = {};
      result.code = item;
      return result;
    });
  } else {
    form.value.apiList = [];
  }
  console.info(data)

}

defineExpose({setData})
</script>

<style scoped>
h2 {
  font-size: 17px;
  color: #3c4a54;
  padding: 0 0 30px 0;
}

.apilist {
  border-left: 1px solid #eee;
}

[data-theme="dark"] h2 {
  color: #fff;
}

[data-theme="dark"] .apilist {
  border-color: #434343;
}
</style>
